デザイナーと考えたAtomic Design
from Kyoto.js 17
デザイナーと考えたAtomic Design
Atomic Designとは
小さいコンポーネントを組み合わせてより大きなコンポーネントを作っていく考え方
分子構造にみたてた名前・規則
責務
atoms
デザインの統一性
morecules
行動を阻害しない
organisms
行動を促す
依存関係
下位の概念にのみ依存してよい
コンポーネント指向
再利用可能か
「ツイートする」ボタンの例
はてなブログ タグにおけるAtomic Design
はてなのデザイナーの職務
CSSもJSXも書く
はてなブログのフロントエンド変遷
Reactを導入していたがコンポーネント指向は徹底していなかった
Atomic Designをやっていく
styled-componentsを採用
実践 (守)
上位の概念にべたっと書いていく
organismsにまとめられそう
さらにmodulesやatomsへ
破
moreculesとorganismsの境界が曖昧で悩むことが増えた
離
atom
サービス内の文脈に強く依存しない
organism
ページ内の有機的なまとまり
templates
ページ全体
他社事例を見てもアレンジしていることが多かった
Atomic Design振り返り
世の「フロントエンドエンジニア」は元々こうだったのかもしれない